<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Button type="primary" @click="handleAllocation" class="ivu-mb-16">新增</Button>
            <Table highlight-row :columns="columns" :data="data">
                <template slot-scope="{ row }" slot="status">
                    <Badge v-if="row.status ==='1'" color="green" text="启用" />
                    <Badge v-if="row.status ==='0'" color="red" text="停用" />
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <a @click="handleAllocation">编辑</a>
                    <Divider type="vertical" />
                    <a>删除</a>
                </template>
            </Table>
        </Card>
        <Modal v-model="modal" title="新增" @on-ok="handleSubmit1" @on-cancel="handleDrawerCancel">
            <Form rel="formItem" :model="formItem" :label-width="118">
                <FormItem label="标签组名称" required>
                    <Input v-model="formItem.input" placeholder="请输入"></Input>
                </FormItem>
                <FormItem
                    v-for="(item, index) in formItem.items"
                    v-if="item.status"
                    :key="index"
                    :label="'标签 ' + item.index"
                    :prop="'items.' + index + '.value'"
                    :rules="{required: true, message: '标签 ' + item.index +' 请录入内容', trigger: 'blur'}"
                >
                    <Row>
                        <Col span="18">
                            <Input type="text" v-model="item.value" placeholder="Enter something..."></Input>
                        </Col>
                        <Col span="4" offset="1">
                            <Button @click="handleRemove(index)">删除</Button>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem>
                    <Row>
                        <Col span="12">
                            <Button type="dashed" long @click="handleAdd" icon="md-add">新增标签</Button>
                        </Col>
                    </Row>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
export default {
    name: 'diagnosis',
    data() {
        return {
            index: 1,
            modal: false,
            formItem: {
                input: '',
                switch: true,
                items: [
                    {
                        value: '',
                        index: 1,
                        status: 1
                    }
                ]
            },
            columns: [
                {
                    title: '标签组',
                    key: 'labelGroup'
                },
                {
                    title: '子标签',
                    key: 'label'
                },
                {
                    title: '操作',
                    slot: 'operation'
                }
            ],
            data: [
                {
                    labelGroup: '营销',
                    label: '活动/专家/康复发'
                },
                {
                    labelGroup: '活动',
                    label: '活动/专家'
                }
            ]
        }
    },
    methods: {
        handleAllocation() {
            this.modal = true
        },
        handleDrawerCancel() {
            this.$Message.warning('已取消!')
        },
        handleSubmit1() {
            this.$Message.success('操作成功!')
        },
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.$Message.success('Success!')
                } else {
                    this.$Message.error('Fail!')
                }
            })
        },
        handleReset(name) {
            this.$refs[name].resetFields()
        },
        handleAdd() {
            this.index++
            this.formItem.items.push({
                value: '',
                index: this.index,
                status: 1
            })
        },
        handleRemove(index) {
            this.formItem.items[index].status = 0
        }
    }
}
</script>
